<script setup>
import { onMounted, ref } from 'vue'
import ImageArea from './components/ImageArea.vue'
import { getVehicleDetailsApi } from '@/api/publish'
import { useRoute } from 'vue-router'
// import { useRoute, onBeforeRouteUpdate } from 'vue-router'
const route = useRoute()

// 封面图和详细图列表
const picList = ref([])
// 车辆详情
const vehicleDetails = ref({})
const setVehicleDetails = async () => {
  const res = await getVehicleDetailsApi(route.params.id)
  vehicleDetails.value = res.data
  // 将服务器返回的mainPictures字符串(json数组)转为数组
  picList.value = [
    vehicleDetails.value.frontPic,
    ...JSON.parse(vehicleDetails.value.mainPictures)
  ]
}
// 相同组件的路由切换时执行，避免组件缓存问题
// onBeforeRouteUpdate((to) => {
//     console.log(to)
// })
onMounted(() => {
  setVehicleDetails()
})
</script>

<template>
  <div class="container">
    <!-- 面包屑 -->
    <div class="bread-container">
      <el-breadcrumb separator=">">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>车辆详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 车辆信息 -->
    <div class="info-container" v-if="Object.keys(vehicleDetails).length > 0">
      <div class="goods-info">
        <div class="media">
          <!-- 图片预览区 -->
          <ImageArea :pictureList="picList" />
        </div>
        <div class="spec">
          <!-- 商品信息区 -->
          <p class="g-name">
            {{ vehicleDetails.vehicleName }}
            {{ vehicleDetails.version }}
            {{ vehicleDetails.engine }}
            {{ vehicleDetails.gearbox }}
          </p>
          <p style="margin: 10px 0">
            <i style="margin-right: 10px">
              <el-tag type="primary">新上架</el-tag>
            </i>
            <i>
              <el-tag type="warning"
                >{{ vehicleDetails.transferNum }}次过户</el-tag
              >
            </i>
          </p>
          <ul class="meta-desc">
            <li>
              <p>表显历程</p>
              <h4>{{ vehicleDetails.mileage }}</h4>
            </li>
            <li>
              <p>上牌时间</p>
              <h4>{{ vehicleDetails.registerDate }}</h4>
            </li>
            <li>
              <p>挡位/排量</p>
              <h4>{{ vehicleDetails.engine }} {{ vehicleDetails.gearbox }}</h4>
            </li>
            <li>
              <p>车辆所在地</p>
              <h4>{{ vehicleDetails.city }}</h4>
            </li>
            <li>
              <p>排放标准</p>
              <h4>{{ vehicleDetails.emissionStandard }}</h4>
            </li>
          </ul>
          <p class="g-price">
            <span class="new-price">￥{{ vehicleDetails.currentPrice }}</span>
            <i><el-tag type="primary">不含过户费</el-tag></i>
            <span class="old-price">
              新车含税价：{{ vehicleDetails.originalPrice || '未知' }}</span
            >
          </p>
          <p style="margin-bottom: 20px">
            <el-tag type="primary"
              ><span style="font-size: 14px; margin-right: 10px">留言</span>
            </el-tag>
            <el-text type="info">
              {{
                vehicleDetails.leaveMessage + '缴纳定金缴纳定金缴纳定金缴纳定金'
              }}
            </el-text>
          </p>
          <div class="g-service">
            <dl>
              <dt>促销</dt>
              <dd>
                <el-text type="primary">
                  <a href="javascript:;">兰博基尼5元代金券，速领！！！</a>
                </el-text>
              </dd>
            </dl>
            <dl>
              <dt>服务</dt>
              <dd>
                <span>送车上门</span>
                <span>七天无理由退换</span>
              </dd>
            </dl>
          </div>
          <div>
            <a
              class="btn"
              @click.prevent="$router.push(`/order/${vehicleDetails.vid}`)"
              >缴纳定金</a
            >
            <a class="btn" href="javascript:;;">咨询电话</a>
          </div>
        </div>
      </div>
      <div class="source-info">
        <div class="left">
          <!-- 校园或车商信息 -->
          <desc-card
            v-if="vehicleDetails.campusOrShopId"
            :campusName="vehicleDetails.campusOrShopName"
            :picture="vehicleDetails.campusOrShopPicture"
            :addr="vehicleDetails.campusOrShopDtoAddr"
            :count="999"
            :todayNew="999"
            size="mini"
          />
          <!-- 个人车源信息 -->
          <div v-else class="user">
            <el-avatar :size="150" :src="vehicleDetails.avatar"></el-avatar>
            <div class="introduce">
              <h3 style="text-align: left; padding-bottom: 10px">
                {{ vehicleDetails.nickname }}
              </h3>
              <p>
                <el-icon><i-ep-Location /></el-icon>
                <span> {{ vehicleDetails.tradeAddr }} </span>
              </p>
            </div>
          </div>
        </div>
        <div class="right">
          <a
            v-if="vehicleDetails.campusOrShopDto"
            class="btn"
            href="javascript:;;"
            @click.prevent="
              $router.push(
                `/list?campusOrShopId=${vehicleDetails.campusOrShopDto.id}`
              )
            "
            >点击进入</a
          >
          <a
            v-else
            class="btn"
            href="javascript:;;"
            @click.prevent="$router.push(`/`)"
            >个人主页'</a
          >
        </div>
      </div>
      <div class="car-footer">
        <h3>车辆档案</h3>
        <div class="car-record">
          <ul>
            <li>
              <span>品&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;牌</span>
              <span>{{ vehicleDetails.brandName || '-' }}</span>
            </li>
            <li>
              <span>车身颜色</span>
              <span>{{ vehicleDetails.color || '-' }}</span>
            </li>
            <li>
              <span>排放标准</span>
              <span>{{ vehicleDetails.emissionStandard || '-' }}</span>
            </li>
            <li>
              <span>所&nbsp;&nbsp;在&nbsp;地</span>
              <span>{{ vehicleDetails.city || '-' }}</span>
            </li>
          </ul>
          <ul>
            <li>
              <span>上牌时间</span>
              <span>{{ vehicleDetails.registerDate || '-' }}</span>
            </li>
            <li>
              <span>表显里程</span>
              <span>{{ vehicleDetails.mileage || '-' }}</span>
            </li>
            <li>
              <span>过户次数</span>
              <span>{{ vehicleDetails.transferNum || '-' }}</span>
            </li>
            <li>
              <span>车辆级别</span>
              <span>{{ vehicleDetails.size || '-' }}</span>
            </li>
          </ul>
          <ul>
            <li>
              <span>发&nbsp;&nbsp;动&nbsp;机</span>
              <span>{{ vehicleDetails.engine || '-' }}</span>
            </li>
            <li>
              <span>变&nbsp;&nbsp;速&nbsp;箱</span>
              <span>{{ vehicleDetails.gearbox || '-' }}</span>
            </li>
            <li>
              <span>燃油标号</span>
              <span>{{ vehicleDetails.oilLabel || '-' }}</span>
            </li>
            <li>
              <span>驱动方式</span>
              <span>{{ vehicleDetails.driverWay || '-' }}</span>
            </li>
          </ul>
        </div>

        <h3 style="margin: 30px 0 20px">车辆图片</h3>
        <div class="car-images">
          <img :src="i" v-for="i in picList" :key="i" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.goods-info {
  min-height: 570px;
  background: #fff;
  display: flex;
  padding-bottom: 20px;

  .media {
    width: 580px;
    height: 570px;
    padding: 30px 40px 30px 20px;
  }

  .spec {
    flex: 1;
    padding: 30px 30px 30px 0;

    .meta-desc {
      display: flex;
      background-color: #f8f9fc;
      padding: 20px 0;

      li {
        &:first-child {
          padding-left: 0;
        }

        width: 130px;
        border-right: 1px solid #e6e6e6;
        padding: 0 12px;

        p {
          color: #666d7f;
          margin-bottom: 6px;
        }

        h4 {
          font-size: 18px;
        }
      }
    }

    .g-name {
      font-size: 28px;
    }

    .g-desc {
      color: #999;
      margin-top: 10px;
    }

    .g-price {
      margin: 10px 0 20px;
      display: flex;
      align-items: center;

      .new-price {
        color: $priceColor;
        margin-right: 15px;
        font-size: 36px;
        font-weight: bold;
      }

      .old-price {
        margin-left: 10px;
        color: #999;
        text-decoration: line-through;
        font-size: 12px;
      }
    }
  }

  .g-service {
    background: #f5f5f5;
    width: 500px;
    padding: 20px 10px 0 10px;
    margin-top: 10px;

    dl {
      padding-bottom: 20px;
      display: flex;
      align-items: center;

      dt {
        width: 50px;
        color: #999;
      }

      dd {
        color: #666;

        // &:last-child {
        span {
          margin-right: 10px;

          &::before {
            content: '•';
            color: $xtxColor;
            margin-right: 2px;
          }
        }

        a {
          color: $xtxColor;
        }
        // }
      }
    }
  }

  .goods-sales {
    display: flex;
    width: 400px;
    align-items: center;
    text-align: center;
    height: 140px;

    li {
      flex: 1;
      position: relative;

      ~ li::after {
        position: absolute;
        top: 10px;
        left: 0;
        height: 60px;
        border-left: 1px solid #e4e4e4;
        content: '';
      }

      p {
        &:first-child {
          color: #999;
        }

        &:nth-child(2) {
          color: $priceColor;
          margin-top: 10px;
        }

        &:last-child {
          color: #666;
          margin-top: 10px;

          i {
            color: $xtxColor;
            font-size: 14px;
            margin-right: 2px;
          }

          &:hover {
            color: $xtxColor;
            cursor: pointer;
          }
        }
      }
    }
  }
}

.car-footer {
  padding: 0 55px;
  background: #fff;
  margin: 10px 0;
  padding-top: 20px;
  .car-record {
    display: flex;
    margin-top: 10px;

    padding: 40px 0 40px 60px;
    border: 1px solid #e6e6e6;

    ul {
      width: 390px;

      &:last-child {
        width: 260px;
      }

      li {
        margin-bottom: 15px;

        span:first-child {
          color: #999;
          display: inline-block;
          width: 80px;
        }

        span:last-child {
          color: #1b1b1b;
        }
        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }

  .car-images {
    img {
      width: 550px;
      height: 410px;
      object-fit: cover;
      margin-bottom: 20px;
      &:nth-child(2n-1) {
        margin-right: 20px;
      }
    }
  }
}
.source-info {
  margin: 10px 0;
  padding: 15px 0;
  display: flex;
  justify-content: space-between;
  border-radius: 2px;
  background: radial-gradient(
    circle at 10% 20%,
    rgb(239, 246, 249) 0%,
    rgb(206, 239, 253) 90%
  );
  .left {
    padding-left: 30px;

    .user {
      display: flex;
      .introduce {
        padding-left: 20px;
      }
    }
  }
  .right {
    position: relative;
    top: 30px;
    padding-right: 30px;
  }
}
h3 {
  padding: 10px 0 20px;
  font-size: 24px;
  text-align: center;
}
.btn {
  display: inline-block;
  width: 180px;
  height: 50px;
  margin: 30px 20px 0 0;
  text-align: center;
  line-height: 50px;
  background-color: $xtxColor;
  border-radius: 6px;
  cursor: pointer;

  font-size: 20px;
  color: #fff;

  &:hover {
    background-color: #5ad8bd;
  }
}
</style>
